<breadcrumb />

<mat-card>
  <mat-card-content>
    <section>
      <h2>Icon Trigger</h2>
      <mat-menu #menu1="matMenu">
        <button mat-menu-item>Settings</button>
        <button mat-menu-item>Help</button>
      </mat-menu>

      <button matIconButton [matMenuTriggerFor]="menu1" aria-label="Open Menu">
        <mat-icon>more_vert</mat-icon>
      </button>
    </section>

    <section>
      <h2>Menu with Icons</h2>
      <button matIconButton [matMenuTriggerFor]="menu2" aria-label="Open Menu">
        <mat-icon>more_vert</mat-icon>
      </button>

      <mat-menu #menu2="matMenu">
        <button mat-menu-item>
          <mat-icon>dialpad</mat-icon>
          <span>Redial</span>
        </button>
        <button mat-menu-item>
          <mat-icon>voicemail</mat-icon>
          <span>Check voicemail</span>
        </button>
        <button mat-menu-item>
          <mat-icon>notifications_off</mat-icon>
          <span>Disable alerts</span>
        </button>
      </mat-menu>
    </section>

    <section>
      <h2>Menu with links</h2>
      <button matIconButton [matMenuTriggerFor]="menu3" aria-label="Learn more about Angular">
        <mat-icon>more_vert</mat-icon>
      </button>

      <mat-menu #menu3="matMenu">
        <a href="http://angular.io" mat-menu-item>Angular</a>
        <a href="http://material.angular.io" mat-menu-item>Angular Material</a>
      </mat-menu>
    </section>

    <section>
      <h2>Nested menu</h2>

      <button matButton [matMenuTriggerFor]="animals">Animal index</button>
      <mat-menu #animals="matMenu">
        <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
        <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
      </mat-menu>

      <mat-menu #vertebrates="matMenu">
        <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
        <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
        <button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
        <button mat-menu-item>Birds</button>
        <button mat-menu-item>Mammals</button>
      </mat-menu>

      <mat-menu #invertebrates="matMenu">
        <button mat-menu-item>Insects</button>
        <button mat-menu-item>Molluscs</button>
        <button mat-menu-item>Crustaceans</button>
        <button mat-menu-item>Corals</button>
        <button mat-menu-item>Arachnids</button>
        <button mat-menu-item>Velvet worms</button>
        <button mat-menu-item>Horseshoe crabs</button>
      </mat-menu>

      <mat-menu #fish="matMenu">
        <button mat-menu-item>Baikal oilfish</button>
        <button mat-menu-item>Bala shark</button>
        <button mat-menu-item>Ballan wrasse</button>
        <button mat-menu-item>Bamboo shark</button>
        <button mat-menu-item>Banded killifish</button>
      </mat-menu>

      <mat-menu #amphibians="matMenu">
        <button mat-menu-item>Sonoran desert toad</button>
        <button mat-menu-item>Western toad</button>
        <button mat-menu-item>Arroyo toad</button>
        <button mat-menu-item>Yosemite toad</button>
      </mat-menu>

      <mat-menu #reptiles="matMenu">
        <button mat-menu-item>Banded Day Gecko</button>
        <button mat-menu-item>Banded Gila Monster</button>
        <button mat-menu-item>Black Tree Monitor</button>
        <button mat-menu-item>Blue Spiny Lizard</button>
        <button mat-menu-item disabled>Velociraptor</button>
      </mat-menu>
    </section>
  </mat-card-content>
</mat-card>
